<template>
  <div>
      <div class="selectBtn">
        <div style="width: 400px;">
        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
            <el-select style="width: 120px;" v-model="selects" slot="prepend" placeholder="请选择">
            <el-option label="教材名称" value="教材名称"></el-option>
            <el-option label="出版社" value="出版社"></el-option>
            <el-option label="教材类型" value="教材类型"></el-option>
            <el-option label="所属机构" value="所属机构"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="listTeachingMaterial(selects)"></el-button>
        </el-input>
        </div>
        <div>
            <!-- <el-button type="primary">新增申报</el-button> -->
        </div>
      </div>
      <div>
          <el-button @click="listTeachingMaterial()">全部</el-button>
          <el-button @click="listTeachingMaterial('申报中')">申报中</el-button>
          <el-button @click="listTeachingMaterial('已通过')">已通过</el-button>
          <el-button @click="listTeachingMaterial('未通过')">未通过</el-button>
      </div>
      <div style="margin-top: 24px;">
        <el-table :header-cell-style="{ background: '#eee', color: '#606266' }" :data="tableData"  max-height="450" style="width: 100%">
        <el-table-column prop="reviewType" label="申报类型" >
            <template slot-scope="{row}">
                <p>{{row.reviewType === 'add' ? '新增' : '注销'}}</p>
            </template>
        </el-table-column>
        <el-table-column label="状态" >
            <template slot-scope="{row}">
                <p>{{row.reviewStatus === 0 ? '未通过' : row.reviewStatus === 1 ? '待审核' : '已通过'}}</p>
            </template>
        </el-table-column>
        <el-table-column prop="Principal" label="教材名称" >
            <template>
                <el-button type="text">政治晨课内容</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="typeName" label="教材类型" ></el-table-column>
        <el-table-column prop="press" label="出版社" ></el-table-column>
        <el-table-column label="申报时间" >
          <template slot-scope="{row}">
            <p>{{formatTime(row.reviewDate * 1000)}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="licence" label="原因" ></el-table-column>
        <el-table-column label="操作" >
            <template slot-scope="{row}">
              <p v-if="row.reviewStatus === 1">
                <el-button type="text">删除</el-button>
              </p>
              <p v-if=" row.reviewStatus ===  0">
                <el-button type="text">再次申报</el-button>
              </p>
            </template>
        </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row
            type="flex"
            align="middle"
            justify="center"
            style="margin-top: 20px"
        >
            <el-col :span="7">
            <el-pagination
                background
                layout=" prev, pager, next"
                :total="page.total"
                :page-size="page.pageSize"
                @current-change="changePage"
                @size-change="handleSizeChange"
                :current-page.sync="page.currentPage"
            ></el-pagination>
            </el-col>
        </el-row>
      </div>
  </div>
</template>

<script>
import { listTeachingMaterial } from '@/api'
export default {
  data () {
    return {
      selects: '',
      input3: '',
      page: {
        // 分页数据
        total: 1000, // 总条数
        currentPage: 1, // 默认的页码 是第一个页  决定了当前页码是第几页
        pageSize: 9 // page-size的默认值是10条
      },
      tableData: [
        {
          licence: '2016-05-02',
          Institutional: '王小虎', // 1
          InstitutionalType: '上海市普陀区',
          Organizers: '厉害陈', // 4
          Principal: '150' // 5
        },
        {
          licence: '2016-05-02',
          Institutional: '王小虎', // 1
          InstitutionalType: '上海市普陀区',
          Organizers: '厉害陈', // 4
          Principal: '150' // 5
        },
        {
          licence: '2016-05-02',
          Institutional: '王小虎', // 1
          InstitutionalType: '上海市普陀区',
          Organizers: '厉害陈', // 4
          Principal: '150' // 5
        },
        {
          licence: '2016-05-02',
          Institutional: '王小虎', // 1
          InstitutionalType: '上海市普陀区',
          Organizers: '厉害陈', // 4
          Principal: '150' // 5
        },
        {
          licence: '2016-05-02',
          Institutional: '王小虎', // 1
          InstitutionalType: '上海市普陀区',
          Organizers: '厉害陈', // 4
          Principal: '150' // 5
        },
        {
          licence: '2016-05-02',
          Institutional: '王小虎', // 1
          InstitutionalType: '上海市普陀区',
          Organizers: '厉害陈', // 4
          Principal: '150' // 5
        },
        {
          licence: '2016-05-02',
          Licenceissued: '2016-05-02',
          Institutional: '王小虎',
          InstitutionalType: '上海市普陀区',
          Organizers: '厉害陈',
          Principal: '150'
        }
      ]
    }
  },
  created () {
    this.listTeachingMaterial()
  },
  methods: {
    async listTeachingMaterial (type) {
      console.log(type)
      let data = {}
      const { input3 } = this
      switch (type) {
        case '申报中':
          data = { reviewStatus: 1 }
          break
        case '已通过':
          data = { reviewStatus: 2 }
          break
        case '未通过':
          data = { reviewStatus: 0 }
          break
        case '教材名称':
          data = { name: input3 }
          break
        case '出版社':
          data = { press: input3 }
          break
        case '教材类型':
          data = { type: input3 }
          break
        case '所属机构':
          data = { servicesName: input3 }
          break

        default:
          break
      }
      const ser = await listTeachingMaterial(data)
      if (ser?.code === 200) {
        const { list, total } = ser?.data
        this.tableData = list
        this.page.total = total
      }
    },
    formatTime (item) {
      return this.$formatTime(item)
    }
  }
}
</script>

<style lang="less" scoped>
    .el-button+.el-button {
        margin: 0;
    }
    .selectBtn {
        display: flex;
        margin-top: 15px;
        margin-bottom: 24px;
        align-items: center;
        justify-content: space-between;
    }
</style>
